<!DOCTYPE html>
<html>
  <head>
    <title>Icon Symbolizer</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v3.19.1/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <!-- <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> -->
    <script src="https://openlayers.org/en/v3.19.1/build/ol.js"></script>
    <!-- <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> -->
    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> -->
    <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> -->
    <style>
      #map {
        position: relative;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"><div id="popup"></div></div>
    <script>
      var mapOverview = [
      {
        "imageName": "btn_longmentianguan",
        "centerImageName": "thumb_longmentianguan.jpg",
        "navConfig": "/Hand-Draw-Map/longmentianguan.json",
        "pointX": 314,
        "pointY": 639
      },
      {
        "imageName": "btn_baicaopan",
        "centerImageName": "thumb_baicaopan.jpg",
        "navConfig": "/Hand-Draw-Map/baicaopanjinqu.json",
        "pointX": 866,
        "pointY": 714
      },
      {
        "imageName": "btn_yugudong",
        "centerImageName": "thumb_yugudong.jpg",
        "navConfig": "/Hand-Draw-Map/yugudong.json",
        "pointX": 358,
        "pointY": 1017
      },
      {
        "imageName": "btn_bailixia",
        "centerImageName": "thumb_bailixia.jpg",
        "navConfig": "/Hand-Draw-Map/bailixiajinqu.json",
        "pointX": 340,
        "pointY": 1384
      },
      {
        "imageName": "btn_piaoliu_bailixia",
        "navConfig": "/Hand-Draw-Map/bailixiapiaoliu.json",
        "pointX": 1041,
        "pointY": 1430
      },
      {
        "imageName": "btn_piaoliu_rongdong",
        "navConfig": "/Hand-Draw-Map/yesanporongdongpiaoliu.json",
        "pointX": 972,
        "pointY": 1274
      },
      {
        "imageName": "btn_piaoliu_yesanpo",
        "navConfig": "/Hand-Draw-Map/yesanpopiaoliu.json",
        "pointX": 1041,
        "pointY": 1124
      }
      ];
      let extent = [0, 0, 1198, 1629];
      let projection = new ol.proj.Projection({
        code: 'xkcd-image',
        units: 'pixels',
        extent: extent
      });

      let map = new ol.Map({
        // controls: [],
        logo: false,
        layers: [
          new ol.layer.Image({
            source: new ol.source.ImageStatic({
              url: 'yesanpo.jpg',
              projection: projection,
              imageExtent: extent
            })
          })
        ],
        target: 'map',
        view: new ol.View({
          projection: projection,
          center: ol.extent.getCenter(extent),
          zoom: 1,
          maxZoom: 4,
          minZoom: 0.5
        })
      });
      let activityLayer = new ol.layer.Vector({
        source: new ol.source.Vector()
      });
      for(let i = 0; i < mapOverview.length; i++)
      {
        let mapItem = mapOverview[i];
        let image = mapItem["imageName"] + "@2x.png";
        // 创建一个用于放置活动图标的layer

        // 创建一个活动图标需要的Feature，并设置位置
        let activity = new ol.Feature({
          // point 原点是左下角？
          geometry: new ol.geom.Point([mapItem["pointX"], extent[3] - mapItem["pointY"]])
        })
        // 设置Feature的样式，使用小旗子图标
        activity.setStyle(new ol.style.Style({
          image: new ol.style.Icon({
            src: image,
            anchor: [0.5, 0.5],
            scale: 0.5
          })
        }));
        // 添加活动Feature到layer上，并把layer添加到地图中
        activityLayer.getSource().addFeature(activity);
      }

      map.addLayer(activityLayer);

      map.on('click', function(evt) {
        let feature = map.forEachFeatureAtPixel(evt.pixel,
          function(feature) {
            return feature;
          });
        if(feature)
        {
          console.log("....abc");
        }
        else
        {
          console.log("....none");
        }
      });
    </script>
  </body>
</html>